<template>
  <div class="table">
    <el-table
      :data="tableData"
      style="width: 100%; height: 90%; background-color: transparent"
      class="paylist"
      @row-click="handleClickRow"
    >
      <el-table-column prop="name" label="姓名" width="100" />
      <el-table-column prop="address" label="地址" width="270" />
      <el-table-column prop="tag" label="状态" width="120">
        <template #default="scope">
          <el-tag
            :type="scope.row.tag ? 'success' : 'error'"
            disable-transitions
            >{{ scope.row.tag ? "已缴费" : "未缴费" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClickDetial"
            >详情</el-button
          >
          <el-button link type="primary" size="small" @click="handClickEdit"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- dialog组件 -->
  <DialogComp
    :toggle="dialogTableVisible"
    :tableData="tableData"
    @closeDialog="handleCloseDialog"
    :rowData="rowData"
    :dialogtitle="dialogtitle"
    :isEdit="isEdit"
  />
</template>

<script>
import DialogComp from "@/views/home/children/screen/components/DialogComp.vue";
import { detailList } from "@/mockApi/homepage/MarkDetailData";

import { onMounted, reactive, toRefs, ref } from "vue";
// import link from "@/api/link";
// import apiUrl from "@/api/url";

export default {
  components: { DialogComp },
  setup() {
    let state = reactive({
      dialogTableVisible: false,
      tableData: [],
      rowData: {},
      dialogtitle: "",
      isEdit: false,
    });

    // 点击详情
    const handleClickDetial = () => {
      state.dialogtitle = "物业缴费详情";
      state.dialogTableVisible = true;
      state.isEdit = true;
    };

    // 点击编辑
    const handClickEdit = () => {
      state.dialogtitle = "物业缴费编辑";
      state.dialogTableVisible = true;
    };

    // 点击关闭dialog
    const handleCloseDialog = () => {
      state.dialogTableVisible = false;
      // 确认编辑，重新数据请求刷新列表
      if (!state.isEdit) {
        console.log("请求了");
        getDetailList();
      }
      state.isEdit = false;
    };

    // 列表数据请求方法
    const getDetailList = () => {
      detailList.getAll().then((res) => {
        console.log("列表请求了");
        state.tableData = res;
        console.log(res, "tagres");
      });
    };

    // 列表数据渲染
    onMounted(() => {
      getDetailList();
    });

    // 点击获取rowData
    const handleClickRow = (row, column, event) => {
      state.rowData = row;
      // console.log(state.rowData, "state.rowId");
    };
    return {
      ...toRefs(state),
      handleClickDetial,
      handClickEdit,
      handleCloseDialog,
      handleClickRow,
    };
  },
};

// const tableData = [
//   {
//     date: "2016-05-03",
//     flag: true,
//     name: "Tom",
//     state: "California",
//     city: "Los Angeles",
//     address: "No. 189, Grove St, Los Angeles",
//     zip: "CA 90036",
//     tag: "Home",
//   },
//   {
//     date: "2016-05-02",
//     name: "Tom",
//     state: "California",
//     city: "Los Angeles",
//     address: "No. 189, Grove St, Los Angeles",
//     zip: "CA 90036",
//     tag: "Office",
//   },
//   {
//     date: "2016-05-04",
//     name: "Tom",
//     state: "California",
//     city: "Los Angeles",
//     address: "No. 189, Grove St, Los Angeles",
//     zip: "CA 90036",
//     tag: "Home",
//   },
//   {
//     date: "2016-05-01",
//     name: "Tom",
//     state: "California",
//     city: "Los Angeles",
//     address: "No. 189, Grove St, Los Angeles",
//     zip: "CA 90036",
//     tag: "Office",
//   },
// ];
</script>
<style lang="scss">
.table {
  box-sizing: border-box;
  padding: 10px 20px;
}
.el-table th,
.el-table tr,
.el-table td {
  color: #eee;
  border: 0;
  background-color: transparent !important;
}

.el-table::before {
  //去除底部白线
  left: 0;
  bottom: 0;
  width: 0px;
  height: 0px;
}
</style>
